<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
		<meta name="HandheldFriendly" content="true"/>
		<meta name="MobileOptimized" content="320"/>
		<title>Hello H5+</title>
		<script type="text/javascript" src="../js/common.js"></script>
		<script type="text/javascript" charset="utf-8">
var ws=null,wp=null,wo=null,at=200;
// H5 plus事件处理
function plusReady(){
	ws=plus.webview.currentWebview();
	wo=ws.opener();
	if('iOS'==plus.os.name){
		at=300;
	}
	wp=plus.webview.create('webview_new.html','webview_new.html',{scrollIndicator:'none',scalable:false,popGesture:'none'},{preate:true});
	if(!ws.preate){
		wp.addEventListener('loaded',function(){
			wo&&wo.evalJS("closeWaiting()");
			ws.show('slide-in-right',at);
		},false);
	}
}
if(window.plus){
	plusReady();
}else{
	document.addEventListener('plusready',plusReady,false);
}
// 动画窗口
function animateWindow(type){
	wp.show(type,at);
}
// 关闭窗口
function preateBack(){
	if(!ws.preate){
		wp&&wp.close();
	}
	back();
}
		</script>
		<link rel="stylesheet" href="../css/common.css" type="text/css" charset="utf-8"/>
	</head>
	<body>
		<header>
			<div class="nvbt iback" onclick="preateBack();"></div>
			<div class="nvtt">系统原生动画</div>
		</header>
		<div id="content" class="content">
			<br/>
			<ul class="dlist">
				<li class="ditem" onclick="animateWindow('slide-in-right');">从右侧横向滑出</li>
				<li class="ditem" onclick="animateWindow('slide-in-left');">从左侧横向滑出</li>
				<li class="ditem" onclick="animateWindow('slide-in-top');">从上侧竖向滑出</li>
				<li class="ditem" onclick="animateWindow('slide-in-bottom');">从下侧竖向滑出</li>
				<li class="ditem" onclick="animateWindow('zoom-out');">从小到大逐渐放大</li>
				<li class="ditem" onclick="animateWindow('zoom-fade-out');">从小到大并逐渐透明显示</li>
				<li class="ditem" onclick="animateWindow('fade-in');">从透明到不透明逐渐显示</li>
				<!--<li class="ditem" onclick="animateWindow('flip-x');">以x轴从上到下翻转效果</li>
				<li class="ditem" onclick="animateWindow('flip-rx');">以x轴从下到上翻转转效果</li>
				<li class="ditem" onclick="animateWindow('flip-y');">以y轴从左到右翻转效果</li>
				<li class="ditem" onclick="animateWindow('flip-ry');">以y轴从右到左翻转效果</li>
				<li class="ditem" onclick="animateWindow('page-forward');">向前翻书动画效果</li>-->
				<li class="ditem" onclick="animateWindow('none');">无动画</li>
			</ul>
		</div>
	</body>
</html>